<template>
	<view class="contain">
		<!-- 搜索框 -->
		<view class="searchInput">
			<image class="search_icon" src="https://img-blog.csdnimg.cn/20210316161109714.png"></image>
			<input placeholder="搜索课程" />
		</view>
		<!-- 分类 -->
		<view class="course_class">
			<scroll-view scroll-x="true" style="white-space: nowrap;">
				<view v-for="(item, index) in courseType" :key="index" style="margin-right: 20rpx;display: inline-block;">
					<view :class="{'course_active': item.type == currentType}" @click="changeType(item.type)">
						{{item.name}}
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 课程信息 -->
		<view v-if="courseList.length > 0">
			<view class="course_info" v-for="(item, index) in courseList" :key="index">
					<image mode="scaleToFill" :src="item.imageUrl"></image>
					<view class="course_detail">
						<view>《{{item.name}}》</view>
						<view class="author">{{item.teacher}}</view>
						<view class="course_price">￥ {{item.price}}</view>
						<view class="course_level" v-if="item.level">
							<image v-for="(item, index) in item.level" :key="index" mode="heightFix" src="https://img-blog.csdnimg.cn/20210316154410292.png"></image>
							<image v-for="(item, index) in (5-item.level)" :key="index" mode="heightFix" src="https://img-blog.csdnimg.cn/20210328194224960.png"></image>
							<button class="course_btn" @click="jumpToVideo(item)">观看</button>
						</view>
						<view class="course_level" v-else>
							<image v-for="(item, index) in 5" :key="index" mode="heightFix" src="https://img-blog.csdnimg.cn/20210316154410292.png"></image>
							<button class="course_btn" @click="jumpToVideo(item)">观看</button>
						</view>
				</view>
			</view>
		</view>
		<view v-if="courseList.length == 0" style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
			<view class="null">
				<image src="../../static/classnull.png" mode="aspectFit"></image>
				<text>暂时没有课程</text>
				<!-- <view style="justify-content: center; font-size: medium; width: 428rpx; margin-left: 280rpx; margin-top: 70rpx; color: #707070;">暂时没有课程</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import cloudbase from '@cloudbase/js-sdk';

	const db = cloudbase.database();
	const dbCmd = db.command;
	let that, _openid, courseId = [];
	export default {
		data() {
			return {
				courseType: [{
					name: '钢琴',
					type: 0
				}, {
					name: '吉他',
					type: 1
				}, {
					name: '架子鼓',
					type: 2
				}, {
					name: '声乐',
					type: 3
				}, {
					name: '古筝',
					type: 4
				}, {
					name: '非洲鼓',
					type: 5
				}, {
					name: '主持',
					type: 6
				}, {
					name: '尤克里里',
					type: 7
				}],
				courseList: '',
				currentType: 0
			}
		},
		onLoad: function(e) {
			that = this;
			// 获取所在机构拥有的课程id
			that.getCoursesId(e.type);
		},
		methods: {
			getCoursesId: function(type) {
				let userType = getApp().globalData.userInfo.type;
				// 获取用户加入的班级
				if (userType == '学生') {
					db.collection('class').where({
						institutionId: getApp().globalData.userInfo.institutionId,
						students: dbCmd.all([getApp().globalData.userInfo.openId])
					}).field({
						courses: true
					}).get().then(res => {
						// console.log(res.data);
						let result = res.data;
						result.forEach(items => {
							let courses = items.courses;
							courses.forEach(item => {
								courseId.push(item._id);
							})
						})
						that.getCourse(type);
					})
				} else {
					db.collection('class').where({
						institutionId: getApp().globalData.userInfo.institutionId,
						teacher: getApp().globalData.userInfo.openId
					}).field({
						courses: true
					}).get().then(res => {
						// console.log(res.data);
						let result = res.data;
						result.forEach(items => {
							let courses = items.courses;
							courses.forEach(item => {
								courseId.push(item._id);
							})
						})
						that.getCourse(type);
					})
				}
				
			},
			getCourse: function(type) {
				_openid = getApp().globalData.userInfo._openid;
				if (type) {
					switch (type) {
						case '钢琴':
							// 显示钢琴的课程
							this.showCourses('钢琴');
							this.currentType = 0;
							break;
						case '吉他':
							// 显示吉他课程
							this.showCourses('吉他');
							this.currentType = 1;
							break;
						case '架子鼓':
							// 显示架子鼓课程
							this.showCourses('架子鼓');
							this.currentType = 2;
							break;
						case '声乐':
							// 显示声乐课程
							this.showCourses('声乐');
							this.currentType = 3;
							break;
						case '古筝':
							// 显示古筝课程
							this.showCourses('古筝');
							this.currentType = 4;
							break;
						case '非洲鼓':
							// 显示非洲鼓课程
							this.showCourses('非洲鼓');
							this.currentType = 5;
							break;
						case '主持':
							// 显示主持课程
							this.showCourses('主持');
							this.currentType = 6;
							break;
						case '尤克里里':
							// 显示尤克里里课程
							this.showCourses('尤克里里');
							this.currentType = 7;
							break;
					}
				} else {
					this.showCourses('钢琴');
				}
			},
			jumpToVideo: function(item) {
				if (getApp().globalData.userInfo.openId != '') {
					uni.navigateTo({
						url: '../video/video?item=' + JSON.stringify(item)
					})
				} else {
					uni.navigateTo({
						url: '../login/login'
					})
				}
			},
			changeType: function(type) {
				this.currentType = type;
				switch (type) {
					case 0:
						// 显示钢琴的课程
						this.showCourses('钢琴');
						break;
					case 1:
						// 显示吉他课程
						this.showCourses('吉他');
						break;
					case 2:
						// 显示架子鼓课程
						this.showCourses('架子鼓');
						break;
					case 3:
						// 显示声乐课程
						this.showCourses('声乐');
						break;
					case 4:
						// 显示古筝课程
						this.showCourses('古筝');
						break;
					case 5:
						this.showCourses('非洲鼓');
						break;
					case 6:
						// 显示主持课程
						this.showCourses('主持');
						break;
					case 7:
						// 显示尤克里里课程
						this.showCourses('尤克里里');
						break;
				}
			},
			showCourses: function(type) {
				db.collection('course').where({
					label: type,
					status: '已发布',
					_id: dbCmd.in(courseId) // 筛选出机构拥有的课程
				}).get().then(res => {
					// 获取图片的真实链接imageUrl
					res.data.forEach(item => {
						cloudbase.getTempFileURL({
							fileList: [item.imageUrl]
						}).then(res => {
							let list = res.fileList[0];
							item.imageUrl = list.tempFileURL;
						})
					})
					this.courseList = res.data;
				})
			}
		},
	}
</script>

<style>
	page {
		background-color: #F3F5F7;
	}

	.contain {
		margin: 10rpx 30rpx;
	}

	.searchInput {
		background-color: #fff;
		/* width: 100%; */
		height: 80rpx;
		margin-bottom: 30rpx;
		border-radius: 40rpx;
		display: flex;
		padding-left: 30rpx;
		align-items: center;
	}

	.search_icon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 20rpx;
	}

	.course_class {
		display: flex;
		justify-content: space-between;
		margin: 0rpx 25rpx;
	}

	.course_info {
		background-color: #fff;
		padding: 30rpx;
		margin: 20rpx 0;
		border-radius: 16rpx;
		display: flex;
	}

	.course_info image {
		height: 250rpx;
		width: 200rpx;
	}

	.course_detail {
		display: flex;
		flex-direction: column;
		width: max-content;
		margin-left: 20rpx;
		width: calc(100% - 150rpx);
	}

	.author {
		margin-left: 30rpx;
		font-size: 28rpx;
		color: #999;
	}

	.course_btn {
		background-color: #FD973F;
		color: #fff;
		font-size: 26rpx;
		border-radius: 16rpx;
		height: 60rpx;
		margin-right: 0rpx;
		width: 150rpx;
	}

	.course_active {
		font-weight: bold;
		border-bottom: solid 6rpx #FD973F;
	}

	.course_price {
		color: #666;
		width: 97%;
		margin: 30rpx 0rpx;
		display: flex;
		justify-content: flex-end;
	}

	.course_level {
		display: flex;
	}

	.course_level image {
		height: 35rpx;
		margin: 10rpx 5rpx;
	}
	
	.null {
		width: 100%;
		/* height: 400rpx; */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #707070;
		margin-top: 50rpx;
	}
	.null image {
		
		/* height: 240rpx; */
		/* margin-left: 160rpx; */
		margin-top: 100rpx;
	}
</style>
